/**
 * 
 */
<template>
  <div id="qmviewer_container" style="height: 100%">
    <qmviewer
      v-bind:modelName="modelName"
      v-bind:isCompont="isCompont"
      @callFather_loaded="callFather_loaded"
    ></qmviewer>

    <transition class="move_root">
      <!--    绑定style中top和left-->
      <div class="moveBox" :style="position" v-show="show">
        <div
          class="moveHead"
          @mousedown="mousedown"
          @mousemove="mousemove"
          @mouseup="mouseup"
          @mouseleave="mousemove"
        >
          {{ title }}
        </div>
        <!--      关闭按钮-->
        <div class="close" @click="toggleShow()">X</div>
        <div class="content">
          <!--插槽-->
          <slot>
            <div style="height: 60vh; overflow: hidden">
              <canvas id="mxcad" @click="canvasClick"> </canvas>
            </div>
          </slot>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import qmviewer from "../../components/qmviewer";
import "../../css/lable.css";
import Mx from "mxdraw";
export default {
  name: "Demo2D_3D",
  data() {
    return {
      //你需要打开的模型名称放这里，模型文件是放在 这个目录"/static/localmodel/" ，您需要的文件先上传到官网，然后联系我们拷出来。
      modelName: "AS_洋房.rvt",
      isCompont: true,
      //移动窗体的属性
      title: "常规示例操作",
      show: true, //是否显示
      x: 300, //left:x
      y: 60, //top:y
      leftOffset: 0, //鼠标距离移动窗口左侧偏移量
      topOffset: 0, //鼠标距离移动窗口顶部偏移量
      isMove: false, //是否移动标识
      //标签
      domMap: new Map(),
      qmodel_container: null,
    };
  },
  // 注册组件
  components: {
    qmviewer,
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  beforeCreate() {},
  created() {
    //console.log(this._data);
  },
  computed: {
    //top与left加上px
    position() {
      return `top:${this.y}px;left:${this.x}px;`;
    },
  },
  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 模型加载完成事件
    callFather_loaded(parm) {
      var _this = this;
      _this.qmodel_container = document.getElementById("qmviewer_container");
      console.log("组件Demo", parm);

      qmodel.set_select_callback(function (id) {
        var cmps = JSON.parse(id);
        console.log(cmps);
      });

      // 动态加载 js库核心代码
      Mx.loadCoreCode().then(() => {
        // 创建控件对象
        Mx.MxFun.createMxObject({
          canvasId: "mxcad", // canvas元素的id
          // 如果访问的资源存在跨域问题， 请参考 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS#http_%E5%93%8D%E5%BA%94%E6%A0%87%E5%A4%B4%E5%AD%97%E6%AE%B5 解决
          // 转换后的文件是多个.wgh的文件构成， 但是我们只需要得到前缀，就可以访问，
          // 比如:../../demo/buf/$hhhh.dwg 我们可以直接写成cadFile: "../../demo/buf/hhhh.dwg"
          // 转换后的文件
          cadFile: "./static/dwg/$AS洋房.dwg",
        });
      });
    },
    // canvas画布点击事件
    canvasClick(event) {
      const getPoint = new Mx.MrxDbgUiPrPoint();
      // 当前鼠标所在位置
      getPoint.go().then((pt) => {
        // 当前鼠标所在位置 如果status状态是0 则返回null
        var x = pt.x / 304.8;
        var y = pt.y / 304.8;
        console.log(x, y);
        var len = 10;
        //构造一个盒子的大小，用来跟踪
        var box = {
          min: { x: x - len, y: y - len, z: 0 },
          max: { x: x + len, y: y + len, z: len },
        };
        qmodel.lookat_box(box, true);
      });
    },

    // 关闭编辑、增加弹出框
    closeDialog() {},
    //控制打开关闭
    toggleShow(data) {
      this.x = 100;
      this.y = 50;

      this.show = !this.show;
    },
    mousedown(event) {
      //鼠标按下事件
      this.leftOffset = event.offsetX;
      this.topOffset = event.offsetY;
      this.isMove = true;
    },
    //鼠标移动
    mousemove(event) {
      if (!this.isMove) {
        return;
      }
      this.x = event.clientX - this.leftOffset;
      this.y = event.clientY - this.topOffset;
    },
    //鼠标抬起
    mouseup() {
      this.isMove = false;
    },
  },
};
</script>
<style scoped>
.moveBox {
  width: 500px;
  position: fixed;
  z-index: 99998;
  background: rgb(255, 255, 255);
  box-shadow: 0 0 5px 3px #95a5a6;
}
.moveBox .moveHead {
  height: 35px;
  background-color: rgb(51, 65, 87);
  cursor: move;
  color: #fff;
  padding: 9px 0 0 11px;
}
.moveBox .close {
  position: absolute;
  right: 0;
  top: 0;
  line-height: 30px;
  font-size: 24px;
  cursor: pointer;
  display: block;
  width: 30px;
  height: 30px;
  text-align: center;
  color: #fff;
}

.v-enter,
.v-leave-to {
  opacity: 0;
  transform: scale(0.5);
}
.content {
  padding: 10px;
}
.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}
</style>


 
 